<template>
  <div class="new-box">
    <nav-box></nav-box>
    <div class="news">
      <div class="news-left">
        <span class="hottitle">热点资讯</span>
        <span class="fgx"></span>
        <div class="yg">
          <div v-for="(item,index) in ygData" @click="goNews(index)">
            <img :src="item.cover" alt="">
            <span class="word">{{item.title}}</span>
            <span class="time">{{item.time}}</span>
          </div>
        </div>
      </div>
      <div class="news-right">
        <span class="title">彼帮智能：农业大数据将重构现代农业生态 </span>
        <span class="date">时间：2018-05-12  作者：虎嗅网</span>
        <p>2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐
          2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐
        </p>
        <p style="margin: 40px 0">4年内产业规模过万亿</p>
        <p>2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐
          2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐
        </p>
        <p style="margin: 40px 0">4年内产业规模过万亿</p>
        <p>2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐
          2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐
        </p>
        <p style="margin: 40px 0">4年内产业规模过万亿</p>
        <p>2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐
          2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐
        </p>
        <p style="margin: 40px 0">4年内产业规模过万亿</p>
        <p>2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐
          2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐2014年初，那时的“农业大数据”还是个相对冷僻的词汇，刚刚硕士毕业于西安电子科技大学的李旭阳和他的小伙伴们就敏锐
        </p>
      </div>
    </div>
    <footer-box></footer-box>
  </div>
</template>

<script>
  import navBox from '../common/nav'
  import footerBox from '../common/footer'

  export default {
    name: "newsdetails",
    data() {
      return {
        ygData:[
          {
            cover: require('../../assets/images/1.png'),
            title: "预告 | 农业大数据将重构哈哈哈哈哈哈哈哈哈哈",
            time: "2018-5-12"
          },
          {
            cover: require('../../assets/images/1.png'),
            title: "彼帮智能：农业大数据将重构哈哈哈哈哈哈哈哈哈哈",
            time: "2018-5-12"
          },{
            cover: require('../../assets/images/1.png'),
            title: "彼帮智能：农业大数据将重构哈哈哈哈哈哈哈哈哈哈",
            time: "2018-5-12"
          }
        ]
      }
    },
    components: {
      navBox,
      footerBox
    },
    mounted() {
      document.documentElement.scrollTop = 0;
    }
  }
</script>

<style lang="scss">
  .new-box{
    background: #f2f2f2;
    .news {
      width: 1200px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      margin: 0 auto 80px;
      padding-top: 120px;
      .news-left {
        width: 260px;
        height: 100%;
        background: white;
        padding: 30px 20px 0 20px;
        .hottitle{
          display: block;
          font-size: 24px;
          color: #333333;
          margin-bottom: 30px;
        }
        .fgx{
          display: block;
          width: 100%;
          height: 1px;
          background: #dddddd;
          margin-bottom: 20px;
        }
        .yg {
          > div {
            width: 260px;
            height: 100%;
            background: white;
            overflow: hidden;
            > img {
              display: block;
              width: 260px;
              height: 184px;
              transition: 1s;
            }
            &:hover img {
              transform: scale(1.03);
            }
            .word {
              display: block;
              width: 240px;
              font-size: 16px;
              color: #333333;
              font-weight: 600;
              overflow: hidden;
              text-overflow: ellipsis;
              margin: 20px 0 12px 0;
              white-space: nowrap;
            }
            .time {
              display: block;
              color: #999999;
              font-size: 14px;
              margin-bottom: 30px;
            }
          }
        }
      }
      .news-right {
        padding: 60px 30px 100px;
        width: 820px;
        height: 100%;
        background: white;
        .title{
          font-size: 28px;
          color: #333333;
          font-weight: 500;
          display: block;
          text-align: center;
        }
        .date{
          font-size: 14px;
          color: #999999;
          display: block;
          text-align: center;
          margin: 20px 0 40px;
        }
        >p{
          font-size: 14px;
          color: #333333;
          text-align: justify;
          line-height: 30px;
          text-indent:30px;
        }
      }
    }
  }
</style>
